<template>
    <div class="brand-container">
      <!--导航栏-->
      <van-tabs v-model="active" @click="ChangeCateGoryListData">
        <van-tab v-for="item in brotherCategory" :key="item.id" :title="item.name">
          <!--图片-->
          <div class="banner">
            <van-image fit="cover" :src="bannerUrl" />
            <div class="tmain">
              <h2 class="h2">{{name}}</h2>
              <p class="summary">{{frontDesc}}</p>
            </div>
          </div>
          <!--列表-->
          <van-list class="list-item" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item in goodsList" :key="item.id" @click="toProductsDetail(item.id)">
              <van-image fit="cover" :src="item.list_pic_url" />
              <h2 class="tit van-ellipsis">{{item.name}}</h2>
              <p class="price">{{item.retail_price | RMBformat}}</p>
            </van-cell>
          </van-list>
          <!--列表-->
        </van-tab>
      </van-tabs>
      <!--内容-->
    </div>
  </template>
  
  <script>
  import { GetGoodsListData, GetChannelGoodsListData } from '@/request/api'
  export default {
    name: 'BrandDetail',
    components: {},
    data () {
      return {
        goodsList: [], // 产品列表数据
        brotherCategory: [], // 分类名称
        page: 1, // 页数
        size: 1000, // 每页个数
        currentCategory: {},
        id: '', // id
        name: '', // 标题
        frontDesc: '', // 描述
        bannerUrl: '', // 图片
        active: 0, // 默认选中的索引
        loading: false, // 是否正在加载中
        finished: false, // 是否加载完成
        isRefreshLoading: false // 控制下拉刷新的 loading 状态
      }
    },
    methods: {
      // 点击切换
      ChangeCateGoryListData (title, name) {
        // console.log(title)
        this.active = title
        this.name = name
        this.brotherCategory.forEach(item => {
          if (item.name === name) {
            this.frontDesc = item.front_desc
            this.id = item.id.toString()
          }
        })
        // 重新发起请求
        this.getList(this.id)
        // 改变路由地址id
        this.$router.push({
          path: '/list',
          query: {
            id: this.id
          }
        })
      },
      // 发送请求
      getList (id) {
        GetGoodsListData({
          categoryId: id,
          page: this.page,
          size: this.size
        }).then(res => {
          // 请求成功
          // console.log(res)
          // 产品列表
          this.goodsList = res.data.goodsList
        })
      },
      // 页面打开执行
      onLoad () {
        // 调用请求
        this.getList(this.$route.query.id)
        this.loading = false
      },
      // 产品详情页跳转
      toProductsDetail (id) {
        this.$router.push('/productsDetail?id=' + id)
      }
    },
    created () {
      // console.log(this.$route)
      // 更新发起请求，传入ID
      GetChannelGoodsListData({
        id: this.$route.query.id
      }).then(res => {
        // 请求成功
        // console.log(res)
        // 分类赋值
        this.brotherCategory = res.data.brotherCategory
        this.id = res.data.currentCategory.id.toString()
        this.name = res.data.currentCategory.name
        this.frontDesc = res.data.currentCategory.front_desc
        this.bannerUrl = res.data.currentCategory.banner_url
        // 遍历查找对应的id，如果相对，则改变索引显示
        this.brotherCategory.forEach((item, index) => {
          if (this.$route.query.id === item.id) {
            this.active = index
          }
        })
      })
      // 调用发送请求
      this.getList(this.$route.query.id)
    }
  }
  </script>
  
  <style scoped lang="less">
  .brand-container{
    padding-top: 44px;
    /deep/ .van-tabs__wrap{
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      z-index: 5;
      background-color: #fff;
    }
    .banner{
      margin: 10px;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      .van-image{
        width: 100%;
        height: 180px;
        display: block;
      }
      .tmain{
        width: 90%;
        text-align: center;
        font-size: 16px;
        color: #fff;
        text-shadow: 2px 0px 6px #8b0000;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        .h2{
          font-size: 20px;
          margin-bottom: 10px;
        }
      }
    }
  }
  .list-item{
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    .van-cell{
      width: 50%;
      padding: 5px;
      box-sizing: border-box;
      text-align: center;
      .van-image{
        width: 100%;
        height: 172px;
        display: block;
      }
      .tit{
        font-size: 15px;
        color: #333;
        line-height: 1;
        margin-top: 5px;
        text-align: center;
      }
      .price{
        font-size: 12px;
        color: #8b0000;
        text-align: center;
      }
    }
    .van-cell::after{
      display: none;
    }
  }
  </style>
  